Micron Document
<!DOCTYPE html>
<html class="client-nojs vector-feature-night-mode-disabled vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-sticky-header-enabled" lang="en" dir="ltr"><head>
<meta charset="UTF-8">
<title>HTML form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="https://en.wikipedia.org/wiki/HTML_form"> <link href="./mw/ext.cite.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/ext.pygments.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.icons.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.search.codex.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/user.styles.css" rel="stylesheet" type="text/css">
<meta name="ResourceLoaderDynamicStyles" content="">
<link rel="stylesheet" type="text/css" href="./mw/site.styles.css">
<link rel="stylesheet" type="text/css" href="./mw/noscript.css">
<link rel="stylesheet" type="text/css" href="./footer.css">
<link rel="stylesheet" type="text/css" href="./vector-2022.css">
</head>
<body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-HTML_form rootpage-HTML_form skin-vector-2022 action-view">
<div class="mw-page-container">
<div class="mw-page-container-inner">
<div class="mw-content-container">
<main id="content" class="mw-body">
<header class="mw-body-header vector-page-titlebar">
<h1 id="firstHeading" class="firstHeading mw-first-heading">
<span id="openzim-page-title" class="mw-page-title-main"><span class="mw-page-title-main">HTML form</span></span>
</h1>
</header>
<a id="top"></a>
<div id="bodyContent" class="vector-body ve-init-mw-desktopArticleTarget-targetContainer" aria-labelledby="firstHeading" data-mw-ve-target-container="">
<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="en" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr">
<p>A <b>webform</b>, <b>web form</b> or <b>HTML form</b> on a <a href="Web_page" title="Web page">web page</a> allows a user to enter data that is sent to a <a href="Server_(computing)" title="Server (computing)">server</a> for processing. Forms can resemble <a href="Form_(document)" title="Form (document)">paper</a> or <a href="Database" title="Database">database</a> forms because web users fill out the forms using <a href="Checkbox" title="Checkbox">checkboxes</a>, <a href="Radio_buttons" class="mw-redirect" title="Radio buttons">radio buttons</a>, or <a href="Text_fields" class="mw-redirect" title="Text fields">text fields</a>. For example, forms can be used to enter <a href="Shipping" class="mw-redirect" title="Shipping">shipping</a> or <a href="Credit_card" title="Credit card">credit card</a> data to order a product, or can be used to retrieve search results from a <a href="Search_engine" title="Search engine">search engine</a>.
</p>
<meta property="mw:PageProp/toc">
<div class="mw-heading mw-heading2"><h2 id="Description">Description</h2></div>

<p>Forms are enclosed in the <a href="HTML" title="HTML">HTML</a> <code>&lt;form&gt;</code> element. This HTML element specifies the <a href="Communication_endpoint" title="Communication endpoint">communication endpoint</a> the data entered into the form should be submitted to, and the <a href="HTTP_request" class="mw-redirect" title="HTTP request">method</a> of submitting the data, <code>GET</code> or <code>POST</code>.
</p>
<div class="mw-heading mw-heading3"><h3 id="Elements">Elements</h3></div>
<p>Forms can be made up of standard <a href="Graphical_user_interface" title="Graphical user interface">graphical user interface</a> elements:
</p>
<ul><li><code>&lt;button&gt;</code> — a button that can be tied to action such as submitting the form, resetting the form or executing a JavaScript function.</li>
<li><code>&lt;input&gt;</code> — a element for user input. The element varies by the value of its <code>type</code> attribute.</li>
<li><code>&lt;textarea&gt;</code> — much like the <code>&lt;text&gt;</code> input field except a <code>&lt;textarea&gt;</code> allows for multiple rows of data to be shown and entered</li>
<li><code>&lt;select&gt;</code> — a <a href="Drop-down_list" title="Drop-down list">drop-down list</a> that displays a list of items a user can select from</li></ul>
<p>The input element can have the following types:
</p>
<ul><li><code>text</code> — a simple <a href="Text_box" title="Text box">text box</a> that allows input of a single line of text.</li>
<li><code>email</code> - a type of <code>&lt;text&gt;</code> that requires a partially validated email address</li>
<li><code>number</code> - a type of <code>&lt;text&gt;</code> that requires a number</li>
<li><code>password</code> — similar to <code>&lt;text&gt;</code>, it is used for security purposes, in which the characters typed in are invisible or replaced by symbols such as *</li>
<li><code>tel</code> — a telephone number</li>
<li><code>radio</code> — a <a href="Radio_button" title="Radio button">radio button</a></li>
<li><code>file</code> — a <a href="File_select" title="File select">file select</a> control for uploading a file</li>
<li><code>reset</code> — a <a href="Reset_button" class="mw-redirect" title="Reset button">reset button</a> that, when activated, tells the browser to restore the values of the current form, to their initial values.</li>
<li><code>submit</code> — a <a href="Button_(computing)" title="Button (computing)">button</a> that tells the browser to take action on the form (typically to send it to a server)</li></ul>
<p>The sample image on the right shows most of these elements:
</p>
<ul><li>a text box asking for your name</li>
<li>a pair of radio buttons asking you to choose between gender values</li>
<li>a <a href="Drop-down_list" title="Drop-down list">select box</a> giving you a list of eye colors to choose from</li>
<li>a pair of check boxes to click on if they apply to you</li>
<li>a text area to describe your athletic ability</li>
<li>a submit button to send current form values to the server</li></ul>
<p>These basic elements provide the most common <a href="Graphical_user_interface" title="Graphical user interface">graphical user interface</a> (GUI) elements, but not all. For example, there are no equivalents to a <a href="Tree_view" title="Tree view">tree view</a> or <a href="Grid_view" title="Grid view">grid view</a>.
</p><p>A grid view, however, can be mimicked by using a standard HTML <a href="Table_(HTML)" class="mw-redirect" title="Table (HTML)">table</a> with each cell containing a text input element. A tree view could also be mimicked through nested tables or, more <a href="HTML#Semantic_HTML" title="HTML">semantically</a> appropriately, nested <a href="HTML_element#Lists" title="HTML element">lists</a>. In both cases, a <a href="Server-side" class="mw-redirect" title="Server-side">server-side</a> process is responsible for processing the information, while JavaScript handles the user-interaction. Implementations of these interface elements are available through <a href="JavaScript_library" title="JavaScript library">JavaScript libraries</a> such as <a href="JQuery" title="JQuery">jQuery</a>.
</p><p>HTML 4 introduced the <code>&lt;label&gt;</code> tag, which is intended to represent a caption in a user interface, and can be associated with a specific form control by specifying the <code>id</code> <a href="HTML_attribute" title="HTML attribute">attribute</a> of the control in the label tag's <code>for</code> attribute.<sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> This allows labels to stay with their elements when a window is resized and to allow more desktop-like functionality (e.g. clicking a radio button or checkbox's label will activate the associated input element).
</p><p>HTML 5 introduces a number of input types that can be represented by other interface elements. Some are based upon text input fields and are intended to input and validate specific common data. These include <code>email</code> to enter email addresses, <code>tel</code> for telephone numbers, <code>number</code> for numeric values. There are additional attributes to specify required fields, fields that should have keyboard <a href="Focus_(computing)" title="Focus (computing)">focus</a> when the web page containing the form is loaded, and placeholder text that is displayed within the field but is not user input (such as the 'Search' text displayed in many search input fields before a search term is entered). These tasks used to be handled with <a href="JavaScript" title="JavaScript">JavaScript</a>, but had become so common that support for them was added to the standard. The <code>date</code> input type displays a calendar from which the user can select a date or date range.<sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup> And the <code>color</code> input type can be represented as an input text simply checking the value entered is a correct <a href="Hexadecimal" title="Hexadecimal">hexadecimal</a> representation of a color, according to the specification,<sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup> or a color picker widget (the latter being the solution used in most browsers which support this attribute).
</p>
<div class="mw-heading mw-heading2"><h2 id="Submission">Submission</h2></div>
<p>When data that has been entered into HTML forms is submitted, the names and values in the form elements are encoded and sent to the server in an <a href="HTTP" title="HTTP">HTTP</a> request message using <a href="Hypertext_Transfer_Protocol" class="mw-redirect" title="Hypertext Transfer Protocol">GET</a> or <a href="POST_(HTTP)" title="POST (HTTP)">POST</a>. Historically, an <a href="Email" title="Email">email</a> transport was also used.<sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup> The default <a href="MIME_type" class="mw-redirect" title="MIME type">MIME type (internet media type)</a>, <a href="Application/x-www-form-urlencoded" class="mw-redirect" title="Application/x-www-form-urlencoded">application/x-www-form-urlencoded</a>, is based on a very early version of the general URI <a href="Percent-encoding" title="Percent-encoding">percent-encoding</a> rules, with a number of modifications such as <a href="Newline" title="Newline">newline</a> normalization and replacing spaces with "<code>+</code>" instead of "<code>%20</code>". Another possible encoding, Internet media type <a href="Multipart/form-data" class="mw-redirect" title="Multipart/form-data">multipart/form-data</a>, is also available and is common for POST-based file submissions.
</p>
<div class="mw-heading mw-heading2"><h2 id="Use_with_programming_languages">Use with programming languages</h2></div>
<p>Forms are usually combined with programs written in various <a href="Programming_language" title="Programming language">programming language</a> to allow <a href="Software_developer" class="mw-redirect" title="Software developer">developers</a> to create dynamic <a href="Web_site" class="mw-redirect" title="Web site">web sites</a>. The most popular languages include both client-side and/or server-side languages.
</p><p>Although any programming language can be used on the server to process a form's data, the most commonly used languages are <a href="Scripting_languages" class="mw-redirect" title="Scripting languages">scripting languages</a>, which tend to have stronger <a href="String_(programming)" class="mw-redirect" title="String (programming)">string</a> handling functionality than programming languages such as C, and also have automatic <a href="Memory_management" title="Memory management">memory management</a> which helps to prevent <a href="Buffer_overrun" class="mw-redirect" title="Buffer overrun">buffer overrun</a> attacks.
</p>
<div class="mw-heading mw-heading3"><h3 id="Client-side">Client-side</h3></div>
<p>The <a href="De_facto_standard" title="De facto standard"><i>de facto</i></a> <a href="Client-side_scripting" class="mw-redirect" title="Client-side scripting">client-side scripting</a> language for web sites is <a href="JavaScript" title="JavaScript">JavaScript</a>.
Using JavaScript on the <a href="Document_Object_Model" title="Document Object Model">Document Object Model</a> (DOM) leads to the method of <a href="Dynamic_HTML" title="Dynamic HTML">Dynamic HTML</a> that allows dynamic creation and modification of a web page within the browser.
</p><p>While client-side languages used in conjunction with forms are limited, they often can serve to do pre-<a href="Data_validation" title="Data validation">validation</a> of the form data and/or to prepare the form data to send to a server-side program. This usage is being replaced, however, by <a href="HTML5" title="HTML5">HTML5</a>'s new <code>input</code> field types and <code>required</code> attribute.
</p>
<div class="mw-heading mw-heading3"><h3 id="Server-side_execution">Server-side execution</h3></div>
<p>Server-side code can do a vast assortment of tasks to create dynamic web sites that, for technical or security reasons, client-side code cannot — from <a href="Authentication" title="Authentication">authenticating</a> a <a href="Login" title="Login">login</a>, to retrieving and storing data in a <a href="Database" title="Database">database</a>, to <a href="Spell_checker" title="Spell checker">spell checking</a>, to sending <a href="E-mail" class="mw-redirect" title="E-mail">e-mail</a>. A significant advantage to server-side over client-side execution is the concentration of functionality onto the server rather than relying on different <a href="Web_browser" title="Web browser">web browsers</a> to implement various functions in consistent, <a href="Web_standards" title="Web standards">standardized</a> ways. In addition, processing forms on a server often results in increased security if server-side execution is designed not to trust the data supplied by the client and includes such techniques as <a href="HTML_sanitization" title="HTML sanitization">HTML sanitization</a>. One disadvantage to server side code is <a href="Scalability" title="Scalability">scalability</a>—server side processing for all users occurs on the server, while client side processing occurs on individual client computers.
</p>

<div class="mw-heading mw-heading3"><h3 id="Interpreted_languages">Interpreted languages</h3></div>
<p>Some of the <a href="Interpreted_language" class="mw-redirect" title="Interpreted language">interpreted languages</a> commonly used to design interactive forms in web development are <a href="PHP" title="PHP">PHP</a>, <a href="Python_(programming_language)" title="Python (programming language)">Python</a>, <a href="Ruby_(programming_language)" title="Ruby (programming language)">Ruby</a>, <a href="Perl" title="Perl">Perl</a>, <a href="JavaServer_Pages" class="mw-redirect" title="JavaServer Pages">JSP</a>, <a href="Adobe_ColdFusion" title="Adobe ColdFusion">Adobe ColdFusion</a> and some of the compiled languages commonly used are <a href="Java_(programming_language)" title="Java (programming language)">Java</a> and <a href="C_Sharp_(programming_language)" title="C Sharp (programming language)">C#</a> with <a href="ASP.NET" title="ASP.NET">ASP.NET</a>.
</p>
<div class="mw-heading mw-heading4"><h4 id="PHP">PHP</h4></div>
<p><a href="PHP" title="PHP">PHP</a> is one very common language used for server-side "programming" and is one of the few languages created specifically for <a href="Web_programming" class="mw-redirect" title="Web programming">web programming</a>.<sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-7" class="reference"><a href="#cite_note-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup>
</p><p>To use PHP with an HTML form, the URL of the PHP script is specified in the <code>action</code> attribute of the form tag. The target PHP file then accesses the data passed by the form through PHP's <code class="mw-highlight mw-highlight-lang-php mw-content-ltr" dir="ltr"><span class="nv">$_POST</span></code> or <code class="mw-highlight mw-highlight-lang-php mw-content-ltr" dir="ltr"><span class="nv">$_GET</span></code> variables, depending on the value of the <code>method</code> attribute used in the form. Here is a basic form handler PHP script that will display the contents of the <samp style="padding-left:0.4em; padding-right:0.4em; color:var( --color-subtle, #666666);">first_name</samp> input field on the page:
</p><p><b><samp style="padding-left:0.4em; padding-right:0.4em; color:var( --color-subtle, #666666);">form.html</samp></b>
</p>
<div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Form<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">form</span> <span class="na">action</span><span class="o">=</span><span class="s">"form_handler.php"</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">label</span><span class="p">&gt;</span>Name: <span class="p">&lt;</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"first_name"</span> <span class="p">/&gt;&lt;/</span><span class="nt">label</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span><span class="p">&gt;</span>Submit<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">form</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>
<p><b><samp style="padding-left:0.4em; padding-right:0.4em; color:var( --color-subtle, #666666);">form_handler.php</samp></b>
</p>
<div class="mw-highlight mw-highlight-lang-html+php mw-content-ltr" dir="ltr"><pre><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="cp">&lt;?php</span>
<span class="c1">// requesting the value of the external variable "first_name" and filtering it.</span>
<span class="nv">$firstName</span> <span class="o">=</span> <span class="nb">filter_input</span><span class="p">(</span><span class="nx">INPUT_GET</span><span class="p">,</span> <span class="s2">"first_name"</span><span class="p">,</span> <span class="nx">FILTER_SANITIZE_STRING</span><span class="p">);</span>
<span class="cp">?&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Output<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="cp">&lt;?php</span> <span class="k">echo</span> <span class="s2">"Hello, </span><span class="si">{</span><span class="nv">$firstName</span><span class="si">}</span><span class="s2">!"</span><span class="p">;</span> <span class="cm">/* printing the value */</span><span class="cp">?&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>
<p>The sample code above uses PHP's <code class="mw-highlight mw-highlight-lang-php mw-content-ltr" dir="ltr"><span class="nb">filter_input</span><span class="p">()</span></code> function to sanitize the user's input before inserting it onto the page. Simply printing (echoing) user input to the browser without checking it first is something that should be avoided in secure forms processors: if a user entered the JavaScript code <code class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span><span class="nx">alert</span><span class="p">(</span><span class="mf">1</span><span class="p">)&lt;/</span><span class="nt">script</span><span class="p">&gt;</span></code> into the <samp style="padding-left:0.4em; padding-right:0.4em; color:var( --color-subtle, #666666);">firstname</samp> field, the browser would execute the script on the <samp style="padding-left:0.4em; padding-right:0.4em; color:var( --color-subtle, #666666);">form_handler.php</samp> page, just as if it had been coded by the developer; malicious code could be executed this way. <code class="mw-highlight mw-highlight-lang-php mw-content-ltr" dir="ltr"><span class="nb">filter_input</span><span class="p">()</span></code> was introduced in PHP 5.2. Users of earlier PHP versions could use the <code class="mw-highlight mw-highlight-lang-php mw-content-ltr" dir="ltr"><span class="nb">htmlspecialchars</span><span class="p">()</span></code> function, or <a href="Regular_expressions" class="mw-redirect" title="Regular expressions">regular expressions</a> to sanitize the user input before doing anything with it.
</p>
<div class="mw-heading mw-heading4"><h4 id="Perl_programming_language">Perl programming language</h4></div>
<p><a href="Perl" title="Perl">Perl</a> is another language often used for <a href="Web_development" title="Web development">web development</a>. Perl scripts are traditionally used as <a href="Common_Gateway_Interface" title="Common Gateway Interface">Common Gateway Interface</a> applications (CGIs). In fact, Perl is such a common way to write CGIs that the two are often confused. CGIs may be written in other languages than Perl (compatibility with multiple languages is a design goal of the CGI protocol) and there are other ways to make Perl scripts interoperate with a <a href="Web_server" title="Web server">web server</a> than using CGI (such as <a href="FastCGI" title="FastCGI">FastCGI</a>, <a href="Plack_(software)" title="Plack (software)">Plack</a> or <a href="Apache_HTTP_Server" title="Apache HTTP Server">Apache</a>'s <a href="Mod_perl" title="Mod perl">mod_perl</a>).
</p><p>Perl CGIs were once a very common way to write <a href="Web_application" title="Web application">web applications</a>. However, many web hosts today effectively only support PHP, and developers of web applications often seek compatibility with them.
</p><p>A modern Perl 5 CGI using the CGI module with a form similar to the one above might look like:
</p><p><b><samp style="padding-left:0.4em; padding-right:0.4em; color:var( --color-subtle, #666666);">form_handler.pl</samp></b>
</p>
<div class="mw-highlight mw-highlight-lang-perl mw-content-ltr" dir="ltr"><pre><span class="ch">#!/usr/bin/env perl</span>
<span class="k">use</span><span class="w"> </span><span class="nn">strict</span><span class="p">;</span>
<span class="k">use</span><span class="w"> </span><span class="nn">CGI</span><span class="w"> </span><span class="sx">qw(:standard)</span><span class="p">;</span>

<span class="k">my</span><span class="w"> </span><span class="nv">$name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">param</span><span class="p">(</span><span class="s">"first_name"</span><span class="p">);</span>
<span class="k">print</span><span class="w"> </span><span class="n">header</span><span class="p">;</span>
<span class="k">print</span><span class="w"> </span><span class="n">html</span><span class="p">(</span>
<span class="w"> </span><span class="n">body</span><span class="p">(</span>
<span class="w"> </span><span class="n">p</span><span class="p">(</span><span class="s">"Hello, $name!"</span><span class="p">),</span>
<span class="w"> </span><span class="p">),</span>
<span class="p">);</span>
</pre></div>
<div class="mw-heading mw-heading4"><h4 id="Form-to-email_scripts">Form-to-email scripts</h4></div>
<p>Among the simplest and most commonly needed types of server-side script is that which simply emails the contents of a submitted form. This kind of script is frequently exploited by <a href="Spammer" class="mw-redirect" title="Spammer">spammers</a>, however, and many of the most popular form-to-email scripts in use are vulnerable to hijacking for the purpose of sending spam emails. One of the most popular scripts of this type was <a rel="nofollow" class="external text" href="http://www.scriptarchive.com/formmail.html">"FormMail.pl"</a> made by <a href="Matt's_Script_Archive" title="Matt's Script Archive">Matt's Script Archive</a>. Today, this script is no longer widely used in new development due to lack of updates, security concerns, and difficulty of configuration.
</p>
<div class="mw-heading mw-heading3"><h3 id="Form_builders">Form builders</h3></div>
<p>Some companies offer forms as a <a href="Software_as_a_service" title="Software as a service">hosted service</a>. Usually, these companies give some kind of visual editor, reporting tools and infrastructure to create and host the forms, that can be embedded into webpages.<sup id="cite_ref-8" class="reference"><a href="#cite_note-8"><span class="cite-bracket">[</span>8<span class="cite-bracket">]</span></a></sup> <a href="Web_hosting" class="mw-redirect" title="Web hosting">Web hosting</a> companies provide templates to their clients as an add-on service. Other form hosting services offer free contact forms that a user can install on their own website by pasting the service's code into the site's HTML.
</p>
<div class="mw-heading mw-heading2"><h2 id="History">History</h2></div>
<p>HTML forms were first implemented by the <a href="ViolaWWW" title="ViolaWWW">Viola</a> browser.<sup id="cite_ref-9" class="reference"><a href="#cite_note-9"><span class="cite-bracket">[</span>9<span class="cite-bracket">]</span></a></sup>
</p>
<div class="mw-heading mw-heading2"><h2 id="See_also">See also</h2></div>
<ul><li><a href="CAPTCHA" title="CAPTCHA">CAPTCHA</a></li>
<li><a href="Postback" title="Postback">Postback</a></li>
<li><a href="XForms" title="XForms">XForms</a></li>
<li><a href="HTML" title="HTML">HTML</a></li></ul>
<div class="mw-heading mw-heading2"><h2 id="References">References</h2></div>
<style data-mw-deduplicate="TemplateStyles:r1239543626">
/* start https://en.wikipedia.org/ */


.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}


/* end https://en.wikipedia.org/ */
</style><div class="reflist">
<div class="mw-references-wrap"><ol class="references">
<li id="cite_note-1"><span class="mw-cite-backlink"><b><a href="#cite_ref-1">^</a></b></span> <span class="reference-text"><style data-mw-deduplicate="TemplateStyles:r1238218222">
/* start https://en.wikipedia.org/ */


.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("./mw/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("./mw/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("./mw/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("./mw/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}


/* end https://en.wikipedia.org/ */
</style><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/wiki/HTML/Elements/label">"HTML/Elements/label"</a>. <i>w3.org wiki</i>. 19 May 2023.</cite></span>
</li>
<li id="cite_note-2"><span class="mw-cite-backlink"><b><a href="#cite_ref-2">^</a></b></span> <span class="reference-text"><cite id="CITEREFSatrom,_Brandon2011" class="citation web cs1">Satrom, Brandon (November 2011). <a rel="nofollow" class="external text" href="http://msdn.microsoft.com/en-us/magazine/hh547102.aspx">"Better Web Forms with HTML5 Forms"</a>. <i>MSDN Magazine</i>. Microsoft<span class="reference-accessdate">. Retrieved <span class="nowrap">20 February</span> 2014</span>.</cite></span>
</li>
<li id="cite_note-3"><span class="mw-cite-backlink"><b><a href="#cite_ref-3">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/html5/forms.html">"Forms – HTML5"</a>. <i>w3.org</i>. W3C<span class="reference-accessdate">. Retrieved <span class="nowrap">20 February</span> 2014</span>.</cite></span>
</li>
<li id="cite_note-4"><span class="mw-cite-backlink"><b><a href="#cite_ref-4">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/html-markup/input.color.html">"input type=color – color-well control"</a>. <i>w3.org</i>. W3C<span class="reference-accessdate">. Retrieved <span class="nowrap">31 October</span> 2014</span>.</cite></span>
</li>
<li id="cite_note-5"><span class="mw-cite-backlink"><b><a href="#cite_ref-5">^</a></b></span> <span class="reference-text">User-agent support for email based <a href="Hypertext_Markup_Language" class="mw-redirect" title="Hypertext Markup Language">HTML</a> form submission, using a 'mailto' <a href="Uniform_Resource_Locator" class="mw-redirect" title="Uniform Resource Locator">URL</a> as the form action, was proposed in RFC 1867 section 5.6, during the HTML 3.2 era. Various web browsers implemented it by invoking a separate email program, using their own rudimentary <a href="Simple_Mail_Transfer_Protocol" title="Simple Mail Transfer Protocol">SMTP</a> capabilities, or by becoming <a href="Internet_suite" title="Internet suite">Internet suites</a> by implementing entire <a href="Email_client" title="Email client">Email clients</a>. Although sometimes unreliable, it was briefly popular as a simple way to transmit form data without involving a web server or <a href="Common_Gateway_Interface" title="Common Gateway Interface">CGI</a> scripts.</span>
</li>
<li id="cite_note-6"><span class="mw-cite-backlink"><b><a href="#cite_ref-6">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.php.net/">"PHP: Hypertext Preprocessor"</a>.</cite></span>
</li>
<li id="cite_note-7"><span class="mw-cite-backlink"><b><a href="#cite_ref-7">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20220816170151/http://www.lampfire.com/encyclopedia-web/php.php">"Encyclopedia Web"</a>. Archived from <a rel="nofollow" class="external text" href="http://www.lampfire.com/encyclopedia-web/php.php">the original</a> on 16 August 2022<span class="reference-accessdate">. Retrieved <span class="nowrap">26 September</span> 2012</span>.</cite></span>
</li>
<li id="cite_note-8"><span class="mw-cite-backlink"><b><a href="#cite_ref-8">^</a></b></span> <span class="reference-text"><cite id="CITEREFGarofalo" class="citation web cs1">Garofalo, Josh. <a rel="nofollow" class="external text" href="https://blitzen.com/blog/intro-online-forms-form-builders/">"Intro to Online Forms and Form Builders"</a>. <i>Blitzen Blog</i>.</cite></span>
</li>
<li id="cite_note-9"><span class="mw-cite-backlink"><b><a href="#cite_ref-9">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.webdesignmuseum.org/web-design-history/violawww-1992">"ViolaWWW"</a>. <i>webdesignmuseum.org</i>. Web Design Museum<span class="reference-accessdate">. Retrieved <span class="nowrap">17 February</span> 2022</span>.</cite></span>
</li>
</ol></div></div>
<div class="mw-heading mw-heading2"><h2 id="External_links">External links</h2></div>
<ul><li><a rel="nofollow" class="external text" href="http://www.w3.org/TR/html4/interact/forms.html">Forms in HTML documents</a>, the <a href="W3C" class="mw-redirect" title="W3C">W3C</a>'s spec page for forms in HTML 4.</li>
<li><a rel="nofollow" class="external text" href="https://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html">HTML5 forms specification</a></li>
<li><a href="https://en.wikibooks.org/wiki/HyperText_Markup_Language/Forms" class="extiw external" title="wikibooks:HyperText Markup Language/Forms">Wikibooks: HyperText Markup Language/Forms</a></li>
<li><a rel="nofollow" class="external text" href="https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_form_submit">Try out HTML properties.</a></li></ul>
<div class="navbox-styles"><style data-mw-deduplicate="TemplateStyles:r1129693374">
/* start https://en.wikipedia.org/ */


.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist.inline,.mw-parser-output .hlist.inline dl,.mw-parser-output .hlist.inline ol,.mw-parser-output .hlist.inline ul,.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li{display:none}.mw-parser-output .hlist dt::after{content:": "}.mw-parser-output .hlist dd::after,.mw-parser-output .hlist li::after{content:" · ";font-weight:bold}.mw-parser-output .hlist dd:last-child::after,.mw-parser-output .hlist dt:last-child::after,.mw-parser-output .hlist li:last-child::after{content:none}.mw-parser-output .hlist dd dd:first-child::before,.mw-parser-output .hlist dd dt:first-child::before,.mw-parser-output .hlist dd li:first-child::before,.mw-parser-output .hlist dt dd:first-child::before,.mw-parser-output .hlist dt dt:first-child::before,.mw-parser-output .hlist dt li:first-child::before,.mw-parser-output .hlist li dd:first-child::before,.mw-parser-output .hlist li dt:first-child::before,.mw-parser-output .hlist li li:first-child::before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child::after,.mw-parser-output .hlist dd dt:last-child::after,.mw-parser-output .hlist dd li:last-child::after,.mw-parser-output .hlist dt dd:last-child::after,.mw-parser-output .hlist dt dt:last-child::after,.mw-parser-output .hlist dt li:last-child::after,.mw-parser-output .hlist li dd:last-child::after,.mw-parser-output .hlist li dt:last-child::after,.mw-parser-output .hlist li li:last-child::after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li::before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child::before,.mw-parser-output .hlist dt ol>li:first-child::before,.mw-parser-output .hlist li ol>li:first-child::before{content:" ("counter(listitem)"\a0 "}


/* end https://en.wikipedia.org/ */
</style><style data-mw-deduplicate="TemplateStyles:r1236075235">
/* start https://en.wikipedia.org/ */


.mw-parser-output .navbox{box-sizing:border-box;border:1px solid #a2a9b1;width:100%;clear:both;font-size:88%;text-align:center;padding:1px;margin:1em auto 0}.mw-parser-output .navbox .navbox{margin-top:0}.mw-parser-output .navbox+.navbox,.mw-parser-output .navbox+.navbox-styles+.navbox{margin-top:-1px}.mw-parser-output .navbox-inner,.mw-parser-output .navbox-subgroup{width:100%}.mw-parser-output .navbox-group,.mw-parser-output .navbox-title,.mw-parser-output .navbox-abovebelow{padding:0.25em 1em;line-height:1.5em;text-align:center}.mw-parser-output .navbox-group{white-space:nowrap;text-align:right}.mw-parser-output .navbox,.mw-parser-output .navbox-subgroup{background-color:#fdfdfd}.mw-parser-output .navbox-list{line-height:1.5em;border-color:#fdfdfd}.mw-parser-output .navbox-list-with-group{text-align:left;border-left-width:2px;border-left-style:solid}.mw-parser-output tr+tr>.navbox-abovebelow,.mw-parser-output tr+tr>.navbox-group,.mw-parser-output tr+tr>.navbox-image,.mw-parser-output tr+tr>.navbox-list{border-top:2px solid #fdfdfd}.mw-parser-output .navbox-title{background-color:#ccf}.mw-parser-output .navbox-abovebelow,.mw-parser-output .navbox-group,.mw-parser-output .navbox-subgroup .navbox-title{background-color:#ddf}.mw-parser-output .navbox-subgroup .navbox-group,.mw-parser-output .navbox-subgroup .navbox-abovebelow{background-color:#e6e6ff}.mw-parser-output .navbox-even{background-color:#f7f7f7}.mw-parser-output .navbox-odd{background-color:transparent}.mw-parser-output .navbox .hlist td dl,.mw-parser-output .navbox .hlist td ol,.mw-parser-output .navbox .hlist td ul,.mw-parser-output .navbox td.hlist dl,.mw-parser-output .navbox td.hlist ol,.mw-parser-output .navbox td.hlist ul{padding:0.125em 0}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em}body.skin--responsive .mw-parser-output .navbox-image img{max-width:none!important}@media print{body.ns-0 .mw-parser-output .navbox{display:none!important}}


/* end https://en.wikipedia.org/ */
</style><style data-mw-deduplicate="TemplateStyles:r1038841319">
/* start https://en.wikipedia.org/ */


.mw-parser-output .tooltip-dotted{border-bottom:1px dotted;cursor:help}


/* end https://en.wikipedia.org/ */
</style></div><div role="navigation" class="navbox authority-control" aria-label="Navbox599" style="padding:3px"><table class="nowraplinks hlist navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="row" class="navbox-group" style="width:1%">Authority control databases: National </th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"><ul><li><span class="uid"><span class="rt-commentedText tooltip tooltip-dotted" title="WWW formuláře"><a rel="nofollow" class="external text" href="https://aleph.nkp.cz/F/?func=find-c&amp;local_base=aut&amp;ccl_term=ica=ph579342&amp;CON_LNG=ENG">Czech Republic</a></span></span></li></ul></div></td></tr></tbody></table></div>
<p class="mw-empty-elt">
</p></div><!--htdig_noindex--><div><div class="zim-footer">
This article is issued from <a class="external text" title="Last edited on 2025-07-21" href="https://en.wikipedia.org/wiki/?title=HTML_form&amp;oldid=1301670273">Wikipedia</a>. The text is available under <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-Share Alike 4.0</a> unless otherwise noted. Additional terms may apply for the media files.
</div>
</div><!--/htdig_noindex--></div>
</div>
</main>
</div>
</div>
</div>

</body></html>